<html>
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>TickMap</title>
        <link type="text/css" rel="stylesheet" href="/css/tickmap.css">
 		<script type="text/javascript" src="/lib/mootools-core.js"></script>
        <script type="text/javascript" src="/lib/mootools-more.js"></script>
        <script type="text/javascript" src="/tickmap.js"></script>
        <script type="text/javascript" src="/wikimapiaCategories.js"></script>
        <script type="text/javascript" src="/tickmap-ol.js"></script>
        <script type="text/javascript" src="/utils.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="/views/index.js"></script>
    </head>
    <body>
        <div id="mapDiv">
            <div id='map'/>
        </div>

        <div id="menues">
            <img id='logo' src='/img/logo.png' onclick='showMenuDiv()'/>

            <div id='menuPpal' class='menu'>
                <p class='menuTitle'>
                    Menú Principal
                </p>
                <p class='menuItem'>
                    Lugares
                </p>
                <p class='menuItem' onclick='showMenu("menuCategories");'>
                    Categorías
                </p>
                <p class='menuItem'>
                    MenuItem
                </p>
                <p class='menuItem'>
                    MenuItem
                </p>
            </div>

            <div id='menuCategories' class='menu'>
                <p class='menuTitle'>
                    Categorías
                </p>
                <p class='menuItem'>
                    <input id='categorySearch' class='menuSearch' type='text' value=''/>
                    <img id='addCategory' src='/img/add.png' onclick="$('categoryEdit').setStyle('display','block');"/>
                </p>
                <div class='menuContent' id='categoryList' style='display:none'>
                </div>
                <div class='menuContent' id='categoryEdit' style='display:none'>
                    <p class='menuContentItem'>
                        <label class='menuLabel'>Name:</label>
                        <input id='categoryName' class='menuInput' type='text' value=''/>
                    </p>
                    <p class='menuContentItem'>
                        <label class='menuLabel'>Nombre español:</label>
                        <input id='categoryName_ES' class='menuInput' type='text' value=''/>
                    </p>
                    <p class='menuContentItem'>
                        <label class='menuLabel'>Categorías Wikipamia:</label>
                        <input id='wikimapiaCategory' class='menuSearch' type='text' value='' onkeyup="populateOptions(event, this, false, wikimapiaEsCategories);"/>
                        <img id='addWikimapiaCategory' src='/img/addItem.png' onclick='addWikipamiaCategory();'/>
                    </p>
                    <p class='menuContentItem'>
                        <ol id="wikimapiaCategories">
                        </ol>
                    </p>
                    <p class='menuContentItem'>
                        <input id='categorySave' class='menuButton' type='button' value='Guardar' onclick"saveCategory();"/>
                        <input id='categoryCancel' class='menuButton' type='button' value='Cancelar' onclick="$('categoryEdit').setStyle 'display','none');"/>
                    </p>
                </div>
                <p class='menuFooter'>
                    <a onclick='showMenu("menuPpal");'>Volver</a>
                </p>
            </div>
        </div>  
    </body>
</html>
